'use client'

import { useState, useEffect, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Menu, X } from 'lucide-react'
import Particles from "react-tsparticles"
import { loadFull } from "tsparticles"
import type { Engine } from "tsparticles-engine"

const StarField = () => {
  return (
    <div className="fixed inset-0 z-0">
      {[...Array(100)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute rounded-full bg-white"
          style={{
            width: Math.random() * 2 + 1 + 'px',
            height: Math.random() * 2 + 1 + 'px',
            top: Math.random() * 100 + '%',
            left: Math.random() * 100 + '%',
          }}
          animate={{
            scale: [1, 1.2, 1],
            opacity: [0.7, 1, 0.7],
          }}
          transition={{
            duration: Math.random() * 3 + 2,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
      ))}
    </div>
  )
}

const CosmicBackground = () => {
  return (
    <motion.div
      className="fixed inset-0 z-0"
      style={{
        background: 'radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)',
      }}
      animate={{
        backgroundPosition: ['0% 0%', '100% 100%'],
      }}
      transition={{
        duration: 20,
        repeat: Infinity,
        repeatType: 'reverse',
        ease: 'linear',
      }}
    >
      <StarField />
    </motion.div>
  )
}

export default function CosmicFlowBlog() {
  const [menuOpen, setMenuOpen] = useState(false)
  const [activeSection, setActiveSection] = useState('home')
  const [searchExpanded, setSearchExpanded] = useState(false)

  const particlesInit = useCallback(async (engine: Engine) => {
    await loadFull(engine)
  }, [])

  const toggleMenu = () => setMenuOpen(!menuOpen)

  return (
    <div className="min-h-screen text-white overflow-hidden">
      <CosmicBackground />
      <Particles
        id="tsparticles"
        init={particlesInit}
        options={{
          fullScreen: { enable: true },
          background: { color: { value: "transparent" } },
          fpsLimit: 120,
          interactivity: {
            events: {
              onClick: { enable: true, mode: "push" },
              onHover: { enable: true, mode: "repulse" },
              resize: true,
            },
            modes: {
              push: { quantity: 4 },
              repulse: { distance: 200, duration: 0.4 },
            },
          },
          particles: {
            color: { value: ["#ff6b6b", "#4ecdc4", "#45aaf2", "#a55eea", "#fed330"] },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: { enable: true },
            move: {
              direction: "none",
              enable: true,
              outModes: { default: "bounce" },
              random: false,
              speed: 1,
              straight: false,
            },
            number: { density: { enable: true, area: 800 }, value: 80 },
            opacity: { value: 0.5 },
            shape: { type: ["circle", "triangle", "star", "polygon"] },
            size: { value: { min: 1, max: 5 } },
          },
          detectRetina: true,
        }}
      />
      
      <header className="fixed top-0 left-0 w-full z-50 p-4">
        <nav className="flex justify-between items-center">
          <motion.h1 
            className="text-4xl font-bold"
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
          >
            Cosmic Flow
          </motion.h1>
          <Button variant="ghost" size="icon" onClick={toggleMenu}>
            {menuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </nav>
      </header>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="fixed inset-0 bg-black bg-opacity-90 z-40 flex items-center justify-center"
          >
            <nav className="text-center">
              {['home', 'articles', 'gallery', 'about'].map((item) => (
                <motion.div
                  key={item}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 20 }}
                  transition={{ duration: 0.3, delay: 0.1 }}
                >
                  <Button
                    variant="ghost"
                    className="text-3xl mb-4 hover:text-purple-400 transition-colors"
                    onClick={() => {
                      setActiveSection(item)
                      toggleMenu()
                    }}
                  >
                    {item.charAt(0).toUpperCase() + item.slice(1)}
                  </Button>
                </motion.div>
              ))}
            </nav>
          </motion.div>
        )}
      </AnimatePresence>

      <main className="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
        <AnimatePresence mode="wait">
          {activeSection === 'home' && (
            <motion.div
              key="home"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5 }}
              className="text-center"
            >
              <h2 className="text-7xl font-bold mb-6">探索无尽宇宙</h2>
              <p className="text-2xl mb-8">每个想法都是一颗新的星星</p>
              <div className="flex justify-center items-center relative">
                <motion.div
                  initial={{ width: '40px' }}
                  animate={{ width: searchExpanded ? '300px' : '40px' }}
                  transition={{ duration: 0.3 }}
                  className="relative"
                >
                  <Input
                    className="w-full bg-transparent border-2 border-purple-500 rounded-full text-white pl-10 pr-4 py-2 focus:outline-none focus:border-pink-500 transition-all duration-300"
                    placeholder={searchExpanded ? "搜索灵感..." : ""}
                    value={searchExpanded ? undefined : ""}
                  />
                  <Search
                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-500 cursor-pointer"
                    onClick={() => setSearchExpanded(!searchExpanded)}
                  />
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: 0.1 }}
                >
                  <Button
                    className="ml-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-2 px-4 rounded-full transition-all duration-300 transform hover:scale-105"
                  >
                    探索
                  </Button>
                </motion.div>
              </div>
            </motion.div>
          )}
          {activeSection === 'articles' && (
            <motion.div
              key="articles"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5 }}
              className="w-full max-w-4xl"
            >
              <h2 className="text-5xl font-bold mb-8">思想星图</h2>
              {[1, 2, 3].map((i) => (
                <motion.article
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                  className="mb-12"
                >
                  <h3 className="text-3xl font-semibold mb-4">量子纠缠的奥秘</h3>
                  <p className="text-lg mb-4">在量子世界中，粒子之间存在着一种神秘的联系，这种现象被称为量子纠缠...</p>
                  <Button variant="outline" className="hover:bg-purple-600 hover:text-white transition-colors">
                    继续阅读
                  </Button>
                </motion.article>
              ))}
            </motion.div>
          )}
          {activeSection === 'gallery' && (
            <motion.div
              key="gallery"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5 }}
              className="w-full max-w-6xl"
            >
              <h2 className="text-5xl font-bold mb-8">宇宙画廊</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.5, delay: i * 0.1 }}
                    className="aspect-square bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg overflow-hidden"
                  >
                    <img
                      src={`https://source.unsplash.com/random/800x800?space&sig=${i}`}
                      alt={`Space image ${i}`}
                      className="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
                    />
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}
          {activeSection === 'about' && (
            <motion.div
              key="about"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5 }}
              className="max-w-2xl text-center"
            >
              <h2 className="text-5xl font-bold mb-8">关于我们的宇宙</h2>
              <p className="text-xl mb-6">
                Cosmic Flow 是一个致力于探索思想边界的平台。我们相信每个人都是宇宙中独特的存在，每个想法都值得被倾听和分享。
              </p>
              <p className="text-xl mb-6">
                在这里，我们鼓励自由思考，欢迎各种观点的碰撞。无论你是科学家、艺术家、哲学家，还是单纯的梦想家，这里都有你的一席之地。
              </p>
              <Button className="bg-purple-600 hover:bg-purple-700 text-lg px-8 py-3">
                加入我们的宇宙
              </Button>
            </motion.div>
          )}
        </AnimatePresence>
      </main>

      <footer className="fixed bottom-0 left-0 w-full text-center p-4 text-white/60">
        <p>&copy; 2023 Cosmic Flow. 在思想的宇宙中漫游。</p>
      </footer>
    </div>
  )
}